<template>
  <el-container>
    <el-header class="header">
      <el-button type="primary" size="small">新增</el-button>
    </el-header>
    <el-main>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="id"></el-table-column>
        <el-table-column prop="name" label="角色名称"></el-table-column>
        <el-table-column prop="nameZh" label="角色中文名称"></el-table-column>
        <el-table-column fixed="right" label="操作" width="300px">
          <template slot-scope="scope">
            <el-button type="success" size="small" @click="showMenuDialog(scope.row)">授权</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        class="pagination"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-main>

    <el-dialog title="角色授权" :visible.sync="dialogMenuRole">
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
      >全选</el-checkbox>
      <el-tree
        :data="menus"
        show-checkbox
        node-key="id"
        :default-expanded-keys="defaultExpandedKeys"
        :default-checked-keys="defaultCheckedKeys"
        :props="defaultProps"
        ref="tree"
      ></el-tree>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUserRole = false">取 消</el-button>
        <el-button type="primary" @click="saveMenuRole()">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage4: 1,
      pageSize: 2,
      pageSizes: [1, 2, 3, 4],
      total: 10,
      formLabelWidth: "120px",
      dialogTableVisible: false,
      dialogMenuRole: false,
      isIndeterminate: true,
      checkAll: false,
      role: null,
      defaultExpandedKeys: [],
      defaultCheckedKeys: [],
      menus: [],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  mounted() {
    this.getRequest();
  },
  methods: {
      saveMenuRole(){
         console.log("获取选中的树形节点{}",this.$refs.tree.getCheckedNodes()) ;
         console.log("获取选中的角色id{}",this.role.id) ;
         var array = [];
        this.$refs.tree.getCheckedNodes().forEach(element => {
            array.push(element.id);
        });
        this.$ajax({
            url:'http://localhost:8081/menu/role',
            method:'post',
            data:{
                rid:this.role.id,
                mids:array
            }
        }).then(function(res){
            console.log(res);
        })

      },
    showMenuDialog(row) {
      console.log("角色授权弹出层{}", row);
      this.dialogMenuRole = true;
      this.role = row;
        var $this = this;
        this.$ajax({
            url:'http://localhost:8081/menu/list/all',
            method:'get',
        }).then(function(res){
            console.log(res);
            if(res.data.code == 200){
                $this.menus = res.data.object;
            }
        })



    },
    getRequest() {
      var $this = this;
      this.$ajax({
        url: "http://localhost:8081/role/list/page",
        methods: "get",
        params: {
          pageNo: $this.currentPage4,
          pageSize: $this.pageSize
        }
      }).then(function(res) {
        if (res.data.code == 200) {
          $this.tableData = res.data.object.records;
          $this.total = res.data.object.total;
        } else {
          $this.$message(res.data.res);
        }
      });
    },
    handleCheckAllChange(val) {
      console.log(val);
      if (val) {
        this.$refs.tree.setCheckedNodes(this.menus);
        this.isIndeterminate = false;
        for (var i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
          this.$refs.tree.store._getAllNodes()[i].expanded = true;
        }
      } else {
        this.$refs.tree.setCheckedNodes([]);
        this.isIndeterminate = true;
        for (var i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
          this.$refs.tree.store._getAllNodes()[i].expanded = false;
        }
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getRequest();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val;
      this.getRequest();
    }
  }
};
</script>

